<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-23 10:15:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-20 09:20:23
 * @FilePath: \cxl-h5\src\pages\personalCenter\wallet\pay\Index.vue
-->
<template>
    <section class="wallet-container">
        <section class="money">
            <section class="money-bg"><span></span><span></span></section>
            <section class="money-container">
                <section class="money-box">
                    <section v-for="(item, index) in data.walletInfo.title" :key="item">
                        <span>{{ data.walletInfo.count[index] }}</span>
                        <p>{{ item }}</p>
                    </section>
                </section>
                <section class="btn">
                    <span @click="data.onNaviagate('/wallet/record')"
                        ><img src="../../../../assets/images/jiaoyijilu.png" alt="" /> 交易记录</span
                    >
                    <i></i>
                    <span @click="data.onNaviagate('/invoice')"
                        ><img src="../../../../assets/images/shenqingkaipiao.png" alt="" /> 申请开票</span
                    >
                </section>
            </section>
        </section>
        <section class="hint">
            注：一旦成功购买查询次数，将无法退款。如有任何疑问，请拨打
            <i>400-666-6666</i>。最终解释权归上海蓝速汽车技术有限公司。
        </section>

        <section class="list">
            <section v-for="(item, index) in data.list" :key="item.id">
                <template v-if="item.list.length">
                    <h1>{{ item.title }}</h1>
                    <section class="list-box">
                        <section v-for="(li, i) in item.list" :key="li.id">
                            <section
                                :class="[
                                    'item',
                                    data.selectIndex[0] === index && data.selectIndex[1] === i ? 'active' : ''
                                ]"
                                :key="li.id"
                                @click="data.onSelect(index, i)"
                            >
                                <section class="info">
                                    <span>{{ Number(li.packageCount) }}次</span>
                                    <p>
                                        ￥{{ Number(li.amount) }}
                                        <i>¥{{ li.marketAmount }}</i>
                                    </p>
                                </section>
                                <section class="packageTag" v-if="li.packageTag !== ''">
                                    {{ li.packageTag }}
                                </section>
                            </section>
                        </section>
                    </section>
                </template>
            </section>
        </section>

        <section class="checkbox">
            <label>
                <cxl-checkbox v-model="data.checked" />我已阅读并同意
                <i @click.prevent="data.onOpenProtocol('STORAGE_AGREEMENT')">《储值协议》</i>
            </label>
        </section>

        <section class="pay">
            <cxl-button type="primary" round @click="data.onPay">立即充值</cxl-button>
        </section>
        <!-- loading -->
        <loading v-model="data.loadingVisible" />
    </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { PaySet } from '.'
import loading from '@/components/loading/Index.vue'

const data = reactive(new PaySet())
</script>

<style scoped lang="scss">
.loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.05);
}
.wallet-container {
    box-sizing: border-box;
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--cxl-size-40) + var(--cxl-size-40));

    .money {
        box-sizing: border-box;
        padding: var(--cxl-size-16);
        position: relative;

        .money-bg {
            background-color: #39bf56;
            height: calc(var(--cxl-size-10) * 15);
            border-radius: var(--cxl-size-6) var(--cxl-size-6) 0 0;
            overflow: hidden;

            position: relative;

            span {
                display: block;
                position: absolute;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, 0.06);

                &:nth-child(1) {
                    width: calc(var(--cxl-size-26) * 8);
                    height: calc(var(--cxl-size-26) * 8);
                    top: calc(var(--cxl-size-26) * -4);
                    left: calc(var(--cxl-size-26) * -4);
                }
                &:nth-child(2) {
                    width: calc(var(--cxl-size-26) * 3);
                    height: calc(var(--cxl-size-26) * 3);
                    top: calc(var(--cxl-size-26) * -1.5);
                    right: calc(var(--cxl-size-26) * -0.5);
                }
            }
        }

        .money-container {
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            padding: var(--cxl-size-16);
            width: 100%;
            .money-box {
                display: flex;
                section {
                    width: 33.33%;
                    text-align: center;
                    span {
                        color: var(--cxl-color-white);
                        font-size: var(--cxl-size-28);
                        margin: var(--cxl-size-22) 0 var(--cxl-size-8) 0;
                        display: block;
                    }
                    p {
                        color: var(--cxl-color-white);
                        font-size: var(--cxl-size-14);
                    }
                }
            }

            .btn {
                display: flex;
                justify-content: space-around;
                margin-top: var(--cxl-size-30);
                box-sizing: border-box;
                padding: 0 var(--cxl-size-20);
                i {
                    display: block;
                    width: 1px;
                    height: var(--cxl-size-14);
                    background: var(--cxl-color-white);
                    opacity: 0.3;
                }
                span {
                    display: flex;
                    align-items: center;
                    font-size: var(--cxl-size-14);
                    color: var(--cxl-color-white);

                    img {
                        display: block;
                        width: var(--cxl-size-18);
                        margin-right: var(--cxl-size-6);
                    }
                }
            }
        }
    }

    .hint {
        padding: 0 var(--cxl-size-16);
        margin: 0 0 --cxl-size-12 0;
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-danger);
        i {
            text-decoration: underline;
        }
    }

    .list {
        box-sizing: border-box;
        padding: var(--cxl-size-16) var(--cxl-size-16) 0 var(--cxl-size-16);

        h1 {
            font-size: var(--cxl-size-16);
            margin-bottom: var(--cxl-size-10);
        }
        .list-box {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: var(--cxl-size-20);
            > section {
                width: calc(33.33% - var(--cxl-size-6));
                height: 8rem;
                margin-right: var(--cxl-size-6);
                margin-bottom: var(--cxl-size-6);
            }
        }
        .item {
            width: 100%;
            height: 100%;
            background-color: var(--cxl-color-white);
            border-radius: var(--cxl-size-6);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: var(--cxl-size-12);
            box-sizing: border-box;
            border: 1px solid var(--cxl-color-white);

            .info {
                margin-top: var(--cxl-size-10);

                span {
                    font-size: var(--cxl-size-20);
                    font-weight: 600;
                    color: var(--cxl-color-primary);
                }
            }

            &.active {
                background-image: url('../../../../assets/images/icon_gmyxz@3x.png');
                background-position: right bottom;
                background-size: var(--cxl-size-30) var(--cxl-size-30);
                background-repeat: no-repeat;
                border-color: var(--cxl-color-primary);
                background-color: var(--cxl-color-effff2);
            }

            .packageTag {
                position: absolute;
                top: -1px;
                left: -1px;
                background-color: var(--cxl-color-f57221);
                color: var(--cxl-color-white);
                font-size: var(--cxl-size-12);
                padding: calc(var(--cxl-size-10) / 2) var(--cxl-size-6);
                border-radius: var(--cxl-size-6) 0 var(--cxl-size-6) 0;
                width: auto;
                line-height: var(--cxl-size-12);
            }

            p {
                font-size: var(--cxl-size-16);
                font-weight: 400;
                color: var(--cxl-color-666666);

                i {
                    font-size: var(--cxl-size-12);
                    text-decoration: line-through;
                }
            }
        }
    }

    .checkbox {
        font-size: var(--cxl-size-12);
        box-sizing: border-box;
        padding: 0 var(--cxl-size-16);
        margin: var(--cxl-size-12) 0 calc(var(--cxl-size-40)) 0;
        > label {
            display: flex;
            align-items: center;
        }
        i {
            font-style: normal;
            color: var(--cxl-color-success);
            margin-left: var(--cxl-size-6);
        }
    }
    .pay {
        // margin-top: calc(var(--cxl-size-40) + var(--cxl-size-40) + var(--cxl-size-20));
        // margin-bottom: calc(var(--cxl-size-40) + var(--cxl-size-20));
        width: 100%;
        box-sizing: border-box;
        padding: 0 var(--cxl-size-16);
        position: relative;
        // bottom: calc(var(--cxl-size-40) + var(--cxl-size-20));
        // left: 0;
        > section {
            height: calc(var(--cxl-size-30) + var(--cxl-size-20));
            border-radius: var(--cxl-size-26);
            font-size: var(--cxl-size-15);
        }
    }
}
</style>
